<template>
	<view class="index-com">
		<index-header></index-header>
		<uni-list border-full class="goods-list">
			<uni-list-item class="goods-item" v-for="(item, index) in goods" :key="index" direction="column">
				<template v-slot:header>
					<image class="goods-img" :src="item.image_url" mode="aspectFill"></image>
				</template>

				<view slot="body" class="shop">
					<goodsText :item="item"></goodsText>
				</view>
			</uni-list-item>
		</uni-list>
		<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
	</view>
</template>
<script>
	import indexHeader from './index-header.vue'
	import goodsText from './goods-text.vue'
	export default {
		components: {indexHeader,goodsText},
		data() {
			return {
				goods: [],
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			}
		},
		onLoad() {
			this.getData();
		},
		onPullDownRefresh() {
			this.reload = true;
			this.getData();
		},
		onReachBottom() {
			this.status = 'more';
			this.getData();
		},
		methods: {
			getData() {
				let that = this
				this.status = 'loading';
			  // 模拟接口取数据
			  setTimeout(() => {
			    let tgoods = [];
			    for (let item of Array(10)) {
			      tgoods.push({
			        aa: "66",
			        bb: "8",
			        title: "uni-app 支持原生小程序自定义组件，更开放、更自由",
			        image_url:
			          "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b2e201d0-517d-11eb-8a36-ebb87efcf8c0.jpg",
			        dd: "15%",
			        ff: 234,
			      });
			    }
			    that.goods = [...that.goods,...tgoods];
				this.reload = false;
			  }, 500);
			},
		}
	}
</script>

<style scoped lang="scss">
	.index-com {
		background: $uni-bg-color-grey;
	}
	/* #ifdef MP-WEIXIN */
	.goods-list /deep/ .uni-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		background: $uni-bg-color-grey;
		padding: 20rpx;
	}
	/* #endif */
	/* #ifdef H5 */
	.goods-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		background: $uni-bg-color-grey;
		margin: 20rpx;
	}
	/* #endif */
	.goods-item {
	  width: 48%;
	  // height: 800rpx;
	  margin-bottom:16rpx ;
	  .goods-img{
		  width: 100%;
		  height: 300rpx;
	  }
	}
</style>
